<!-- 用户活跃度与评论图表 -->
<template>
    <div class="line-chart-container">
      <h2 class="chart-title">{{ title }}</h2>
      <span v-if="!data.length" class="no-data-tip">暂无数据</span>
      <v-chart v-else class="line-chart" :option="lineChartOption" autoresize />
    </div>
  </template>
  
  <script>
  import { ref, onMounted, reactive, watch } from 'vue';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { LineChart } from 'echarts/charts';
  import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
  import VChart from 'vue-echarts';
  
  use([
    CanvasRenderer,
    LineChart,
    TooltipComponent,
    LegendComponent,
    GridComponent
  ]);
  
  export default {
    name: 'LineChartComponent',
    components: {
      VChart
    },
    props: {
      title: {
        type: String,
        default: '横向双数据折线图'
      },
      data: {
        type: Array,
        default: () => []
      }
    },
    setup(props) {
      const lineChartOption = reactive({
        color: ['#409eff', '#67c23a'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type:'shadow'
          },
          formatter: function (params) {
          // 处理日期格式
          const dateStr = params[0].name;
          const [month, date] = dateStr.split('.');
          const displayDate = `${month}月${Number(date)}日`;
          let result = `<div style="background-color: #fff; padding: 10px; border-radius: 4px; color: #000;">${displayDate}<br/>`;
          for (let i = 0; i < params.length; i++) {
            result += `<span style="display: inline-block; width: 10px; height: 10px; background-color: ${params[i].color}; margin-right: 5px;"></span>${params[i].seriesName}: ${params[i].value}<br/>`;
          }
          result += '</div>';
          return result;
        }
        },
        legend: {
          textStyle: {
            color: '#94a3b8'
          },
          bottom: 10,
          left: 'center',
          orient: 'horizontal'
        },
        grid: {
          top: '5%', // 适当增大top值，给顶部留出更多空间，可按需调整
          bottom: '10%',
          left: '5%',
          right: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: props.data.map(item => item.name),
          axisLabel: {
            color: '#94a3b8'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#94a3b8'
          },
          // 动态计算y轴最大值，预留一定空间
          max: function () {
            const maxValues = props.data.reduce((acc, item) => {
              const values = [item.value1, item.value2].filter(Number.isFinite);
              if (values.length > 0) {
                const valueMax = Math.max(...values);
                acc = Math.max(acc, valueMax);
              }
              return acc;
            }, 0);
            return maxValues * 1.2; // 乘以1.1是预留10%的空间，可按需调整
          }
        },
        series: [
          {
            name: '评论数',
            type: 'line',
            data: props.data.map(item => item.value1),
            smooth: true,
            lineStyle: {
              width: 2
            },
            symbol: 'circle',
            symbolSize: 6,
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            }
          },
          {
            name: '用户活跃度',
            type: 'line',
            data: props.data.map(item => item.value2),
            smooth: true,
            lineStyle: {
              width: 2
            },
            symbol: 'circle',
            symbolSize: 6,
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            }
          }
        ]
      });
  
      onMounted(() => {
        watch(() => props.data, (newData) => {
          lineChartOption.xAxis.data = newData.map(item => item.name);
          lineChartOption.series[0].data = newData.map(item => item.value1);
          lineChartOption.series[1].data = newData.map(item => item.value2);
        }, { deep: true });
      });
  
      return {
        lineChartOption
      };
    }
  };
  </script>
  
  <style scoped>
  .line-chart-container {
    background-color: #1e293b;
  }
  
  .chart-title {
    color: #3b82f6;
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 600;
  }
  
  .line-chart {
    height: 300px;
  }
  
  .no-data-tip {
    color: white;
    font-size: 18px;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  </style>